// JavaScript Document

jQuery.fn.extend({
	rekening: function() {
		var id=$(this).attr('id');
		$(this).replaceWith("<div id=\""+id+"\">\n	<input type=\"text\" maxlength=\"3\" class=\"p1\" name=\""+id+"1\" id=\""+id+"1\" tag=\""+id+"\" /><input type=\"text\" maxlength=\"7\" class=\"p2\" name=\""+id+"2\" id=\""+id+"2\" tag=\""+id+"\" /><input type=\"text\" maxlength=\"2\" class=\"p3\" name=\""+id+"3\" id=\""+id+"3\" tag=\""+id+"\" />\n	<div class=\"rekeningdd\" id=\""+id+"dd\">\n <ul><li tag=\""+id+"\"><div class=\"val\">091-0122401-11</div><div class=\"tekst\">Chiro Kas</div></li><li tag=\""+id+"\"><div class=\"val\">091-0122401-12</div><div class=\"tekst\">uitleg bij de val</div></li></ul>\n	</div>\n</div>");
		$("#"+id+">input").keypress(function(e){
			var id = "#" + $(this).attr('tag');
			if(e.keyCode<48 || e.keyCode>57){
				var s = new String();
				s=String.fromCharCode(e.keyCode);
				if(s!=""){
					e.preventDefault();
				}
			}
			var vak=$(this).attr('id').substr($(this).attr('tag').length);
			switch(vak){
				case "1":
					if($(this).val().length>=2){
						$(id+"2").focus();
					}
					break;
				case "2":
					if($(this).val().length>=6){
						$(id+"3").focus();
					}
					break;
			}
		});
		$("#"+id+">input").keyup(function(){
			var id = "#" + $(this).attr('tag');
			var ddid = id + "dd";
			
		});
		$("#"+id).focusin(function(){					 
			var id = "#" + $(this).attr('id');
			var ddid = id + "dd";
			getNumbers($(this).attr('id'));
	
			$(ddid).stop('true');
			$(ddid).css('display','block').css({ opacity: 1 }, 500);
		});
		$("#"+id).focusout(function(){
			var id = "#" + $(this).attr('id');
			var ddid = id + "dd";
	
			$(ddid).animate({ opacity: 0 }, 500, function(){$(ddid).css('display','none');});
		});
		
		bindLiClick(id);
		
		function bindLiClick(id){
			$("#"+id+">div>ul>li").click(function(){
				var str = $(this).html();
				var id = "#" + $(this).attr('tag');
				var ddid = id + "dd";
				xml=getXmlObjFromString("<part>"+str+"</part>");
				var nr = xml.getElementsByTagName("div")[0].childNodes[0].nodeValue;
				if(nr!="Een ander rekening nummer..."){
					setRNumber(id,nr);
				} else {
					setRNumber(id,"--");
				}
				
				$(ddid).animate({ opacity: 0 }, 500, function(){$(ddid).css('display','none');});
			});
		}
		function unbindLiClick(id){
			$("#"+id+">div>ul>li").unbind('click');
		}
		function getRNumber(id){
			return $(id+"1").val() + "-" + $(id+"2").val() + "-" + $(id+"3").val();
		}
		function setRNumber(id,nr){
			var nrs = nr.split("-");
			$(id+"1").val(nrs[0]);
			$(id+"2").val(nrs[1]);
			$(id+"3").val(nrs[2]);
		}
		function getXmlObjFromString(xmlString){
			if (window.DOMParser)
			{
				//alert('nice!');
				parser=new DOMParser();
				xmlDoc=parser.parseFromString(xmlString,"text/xml");
			}
			else // Internet Explorer
			{
				alert("this browser sucks donkey cocks!");
				xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
				xmlDoc.async="false";
				xmlDoc.loadXML(xmlString); 
			}
			return xmlDoc;
		}
		
		
		
		function getNumbers(id){
			unbindLiClick(id);
			$.getJSON(base_url+'bestel/getNumbers/'+$("#vereniging").val(), function(data) {
				html="<ul>";
				for (var i in data)
				{
					var ding=data[i];
					if(ding.nummer!=null && ding.tekst!="geen nummers"){
						html+="	<li tag=\""+id+"\">\n";
						html+="		<div class=\"val\">"+ding.nummer+"</div>\n";
						html+="		<div class=\"tekst\">"+ding.tekst+"</div>\n";
						html+="	</li>\n";
					}
				}
				html+="	<li tag=\""+id+"\">\n";
				html+="		<div class=\"val\">Een ander rekening nummer...</div>\n";
				html+="		<div class=\"tekst\"></div>\n";
				html+="	</li>\n";
				html+="</ul>";
			  	$("#"+id+"dd").html(html);
				bindLiClick(id);
			});
		}
		function addline(msg){
			$("#out").val(msg + "\n" + $("#out").val());
		}
		
	}
	
	
	
});